<!-- 商铺管理 -->
<template>
  <div class="spu-warp">
    <!-- 三级联动 -->
    <el-card>
      <ThreeCooperation :get-category-id="getCategoryId" :show-info="showInfo" />
    </el-card>
    <!-- 展示模块 -->
    <el-card style="margin-top: 20px;">
      <!-- Spu展示模块 -->
      <div v-show="showForm === 0">
        <!-- 表格展示数据 -->
        <template>
          <!-- 添加spu按钮 -->
          <el-button
            type="primary"
            icon="el-icon-plus"
            style="margin-bottom: 20px;"
            :disabled="!category3Id"
            @click="showSpu"
          >添加SPU商品</el-button>
          <el-table :data="supList" border style="width: 100%">
            <el-table-column label="序号" width="50" type="index" align="center" />
            <el-table-column prop="spuName" label="SUP名称" width="180" />
            <el-table-column prop="description" label="SUP描述" />
            <el-table-column prop="address" label="操作" width="350px">
              <template slot-scope="scope">
                <el-button size="mini" type="success" icon="el-icon-plus" @click="spuAddSku(scope)">添加</el-button>
                <el-button size="mini" type="warning" icon="el-icon-share" @click="amendSpu(scope)">编辑</el-button>
                <el-button size="mini" type="info" icon="el-icon-info" @click="spuSkuInformation(scope)">信息</el-button>
                <el-button size="mini" type="danger" icon="el-icon-search" @click="deleteSpu(scope)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
        <!-- 分页器模块 -->
        <div class="block">
          <el-pagination
            style="text-align: center;"
            :current-page="page"
            :page-size="pageSize"
            layout=" prev, pager, next, jumper,->,total"
            :total="total"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
      <!-- spu添加与修改模块 -->
      <AddSpu v-show="showForm === 1" ref="spu" @saveSpu="saveSpu" />
      <!-- sku添加与修改模块 -->
      <AddSku v-show="showForm === 2" ref="sku" @saveSku="saveSku" />
    </el-card>
    <!-- SPU信息展示对话框 -->
    <el-dialog :title="`${seveSpuInfo.spuName} sku展示`" :visible.sync="dialogFormVisible" center>
      <el-table :data="skuInfoLsit" stripe style="width: 100%">
        <el-table-column prop="skuName" label="SKU名字" />
        <el-table-column prop="price" label="价格" width="100" />
        <el-table-column label="图片展示">
          <template slot-scope="scope">
            <img :src="scope.row.skuDefaultImg" style="width: 100px;height: 100px;">
          </template>
        </el-table-column>
        <el-table-column prop="skuDesc" label="SKU描述" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import AddSpu from './son/addspu.vue'
import AddSku from './son/addsku.vue'
export default {
  // import引入的组件需要注入到对象中才能使用
  name: 'Spu',
  // import引入的组件需要注入到对象中才能使用
  components: { AddSpu, AddSku },
  data() {
    // 这里存放数据
    return {
      // 切换展示与添加修改数据模块数据
      showInfo: false,
      // 三级联动id
      categoryId: {},
      // 当前页码数
      page: 1,
      // 每页展示数据
      pageSize: 8,
      // 总数据条数
      total: 0,
      // spu数据列表
      supList: [],
      // 3个模块显示与隐藏控制
      showForm: 2,
      // SUP对话框显示与隐藏控制
      dialogFormVisible: false,
      // sku实例数据列表
      skuInfoLsit: [],
      // 查看信息时spu的数据
      seveSpuInfo: {}
    }
  },
  // 监听属性 类似于data概念
  computed: {
    category3Id() {
      return this.categoryId.category3Id
    }
  },
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.showForm = 0
  },
  beforeCreate() { }, // 生命周期 - 创建之前
  beforeMount() { }, // 生命周期 - 挂载之前
  beforeUpdate() { }, // 生命周期 - 更新之前
  updated() { }, // 生命周期 - 更新之后
  beforeDestroy() { }, // 生命周期 - 销毁之前
  destroyed() { }, // 生命周期 - 销毁完成
  activated() { },
  // 方法集合
  methods: {
    // 获取三级联动各个ID
    getCategoryId(id) {
      // 从三级联动那获取三级联动的id
      this.categoryId = id
      // 判断三级联动id是否为空 如果不为空则请求数据
      if (id.category3Id) {
        try {
          this.getSpuList()
        } catch (error) {
          // 如果报错则提示错误信息
        }
      } else {
        // 否则清空数据列表
        this.supList = []
      }
    },
    // 发请求获取spu数据
    async getSpuList() {
      // 判断是否有三级联动第一3级的id
      try {
        const result = await this.$API.spu.reqSpuList(this.page, this.pageSize, this.category3Id)
        if (result.code === 200) {
          this.total = result.data.total
          this.supList = result.data.records
        }
      } catch (error) {
        return Promise.reject(error)
      }
    },
    // 点击第几页时的回调
    handleCurrentChange(val) {
      this.page = val
      this.getSpuList()
    },
    // 点击添加SPU商品按钮时的回调展示spu添加与修改模块
    showSpu() {
      const spu = this.$refs.spu
      // 将spuInfo重置
      spu.spuInfo = {
        // 三级分类id
        category3Id: this.category3Id,
        // 描述种类(spu描述)
        description: '',
        // spu名称
        spuName: '',
        // 品牌id
        tmId: '',
        // spu图片列表
        spuImageList: [],
        // 销售属性列表
        spuSaleAttrList: []
      }
      const all = []
      // 获取品牌列表
      const p_all1 = this.$refs.spu.getTrademarkList()
      all.push(p_all1)
      // 销售属性列表
      const p_all2 = this.$refs.spu.getSaleAttrList()
      all.push(p_all2)
      Promise.all(all).then(() => {
        this.showForm = 1
        this.showInfo = true
      }).catch(() => {
        // 失败则不跳转 谈出提示
        this.$message.error('获取数据失败')
      })
    },
    // 自定义事件回调(saveSpu)
    saveSpu(tag) {
      this.showInfo = false
      this.showForm = 0
      if (tag === 1) {
        try {
          this.getSpuList()
        } catch (error) {
          // 如果报错则提示错误信息
        }
      }
    },
    // 点击修改按钮跳转到修改spu页面 通过获取spu子节点来获取身上的方法
    async amendSpu(scope) {
      // 4个请求全部获取成功才跳转到修改页面
      const all = []
      // 获取单独spu的数据
      const p_all4 = this.$refs.spu.getSpuInfo(scope.row.id)
      // 获取品牌列表
      all.push(p_all4)
      const p_all1 = this.$refs.spu.getTrademarkList()
      all.push(p_all1)
      // 销售属性列表
      const p_all2 = this.$refs.spu.getSaleAttrList()
      all.push(p_all2)
      // 获取图片列表
      const p_all3 = this.$refs.spu.getSpuImgList(scope.row.id)
      all.push(p_all3)
      // console.log(4)
      Promise.all(all).then(() => {
        this.showForm = 1
        this.showInfo = true
      }).catch(() => {
        // 失败则不跳转 谈出提示
        this.$message.error('获取数据失败')
      })
    },
    // 点击删除按钮时的回调
    async deleteSpu(scope) {
      const id = scope.row.id
      const result = await this.$API.spu.reqDeleteSpu(id)
      if (result.code === 200) {
        this.$message.success('删除成功')
        this.getSpuList()
      }
    },
    // 点击信息按钮时的回调
    async spuSkuInformation(scope) {
      const result = await this.$API.spu.refSkuInfoLsiy(scope.row.id)
      if (result.code === 200) {
        this.skuInfoLsit = result.data
        this.seveSpuInfo = scope.row
        this.dialogFormVisible = true
      }
    },
    // sku模块点击操作按钮时的回调
    saveSku(index) {
      if (index === 1) {
        this.getSpuList()
      }
      // 关闭三级联动框
      this.showInfo = false
      // 回到spu展示页面
      this.showForm = 0
    },
    // 点击添加sku按钮时的回调 进行给spu添加sku的操作
    spuAddSku(scope) {
      // 获取sku节点数据 并且在这里进行整理
      const sku = this.$refs.sku
      // 调用initData函数进行一些spu中的数据初始化
      sku.initData(scope.row)
      // 创建一个数组进行保存promise的结果
      const all = []
      // 发获取平台属性列表请求
      const p_all1 = sku.getAttrLsit(this.categoryId)
      all.push(p_all1)
      // 发spu销售属性列表请求
      const p_all2 = sku.getSpuSaleAttrList(scope.row.id)
      all.push(p_all2)
      // 发spu图片列表列表请求
      const p_all3 = sku.getSpuImgList(scope.row.id)
      all.push(p_all3)
      // 判断所有发的请求获取数据成功没有
      Promise.all(all).then(() => {
        // 跳转到添加sku页面
        this.showForm = 2
        // 三级联动模块禁止操作
        this.showInfo = true
      }).catch(() => {
        // 失败则不跳转 谈出提示
        this.$message.error('获取数据失败')
      })
    }
  }
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
</style>
